<template>
	<fs-page class="PageFeatureSearchMulti">
		<fs-crud ref="crudRef" v-bind="crudBinding">
			<template #cell_url="scope">
				<el-tag size="small">{{ scope.row.url }}</el-tag>
			</template>
			<template #actionbar-left>								
				<el-dropdown @command="crudBinding.method.handleCommand" v-if="auth('CaseInfoModelViewSet:ExportAndImport')">
					<el-button type="primary">						
						<el-icon class="el-icon--left"><arrow-down /></el-icon>Excel导入导出
					</el-button>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item command="a">导出案件列表Excel</el-dropdown-item>
							<el-dropdown-item command="b">导入案件列表Excel</el-dropdown-item>
							<el-dropdown-item command="c">导入法院Excel（按分组）</el-dropdown-item>
							<el-dropdown-item command="d">导入法院Excel（按案件）</el-dropdown-item>												
						</el-dropdown-menu>
					</template>
				</el-dropdown>
				<el-button type="primary" style="margin-left: 10px;" v-if="auth('CaseInfoModelViewSet:BatchMark')" @click="crudBinding.method.batchMark">批量标记</el-button>
				<el-button type="primary"  v-if="auth('CaseInfoModelViewSet:BatchEdit')" @click="crudBinding.method.batchModify">批量修改</el-button>
				<el-button type="primary" style="margin-left: 10px;" v-if="auth('CaseInfoModelViewSet:BatchGroup')" @click="crudBinding.method.batchGroup">批量分组</el-button>
				<el-dropdown @command="crudBinding.method.handleCommand" style="margin-left: 10px;" v-if="auth('CaseInfoModelViewSet:ExportInitDoc')">
					<el-button type="primary">
						<el-icon class="el-icon--left"><arrow-down /></el-icon>导出初始文书
					</el-button>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item command="e">起诉状</el-dropdown-item>
							<el-dropdown-item command="f">余额构成表</el-dropdown-item>
							<el-dropdown-item command="g">授权委托书</el-dropdown-item>
							<el-dropdown-item command="h">保全担保书</el-dropdown-item>
							<el-dropdown-item command="i">保全申请书</el-dropdown-item>
							<el-dropdown-item command="j">网络查控书</el-dropdown-item>
							<el-dropdown-item command="k">保全担保书（线下冻结）</el-dropdown-item>
							<el-dropdown-item command="l">保全申请书（线下冻结）</el-dropdown-item>
							<el-dropdown-item command="m">所函</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
				<el-dropdown @command="crudBinding.method.handleCommand" style="margin-left: 10px;" v-if="auth('CaseInfoModelViewSet:ExportEvidence')">
					<el-button type="primary">
						<el-icon class="el-icon--left"><arrow-down /></el-icon>导出证据资料
					</el-button>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item command="n">原始资料</el-dropdown-item>
							<el-dropdown-item command="o">合并影像件</el-dropdown-item>							
						</el-dropdown-menu>
					</template>
				</el-dropdown>
				<el-dropdown @command="crudBinding.method.handleCommand" style="margin-left: 10px;" v-if="auth('CaseInfoModelViewSet:ExportFlowDoc')">
					<el-button type="primary">
						<el-icon class="el-icon--left"><arrow-down /></el-icon>导出流程文书
					</el-button>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item command="p">保全裁定书</el-dropdown-item>
							<el-dropdown-item command="q">解封裁定书【记录型】</el-dropdown-item>
							<el-dropdown-item command="r">解封裁定书【事后型】</el-dropdown-item>
							<el-dropdown-item command="s">保全裁定书【线下】</el-dropdown-item>
							<el-dropdown-item command="t">协助执行通知书【线下】</el-dropdown-item>
							<el-dropdown-item command="u">解封裁定书【线下】</el-dropdown-item>							
						</el-dropdown-menu>
					</template>
				</el-dropdown>
				<div v-if="auth('CaseInfoModelViewSet:ExportOther')">
					<el-dropdown @command="crudBinding.method.handleCommand"  style="margin-left: 10px;">
						<el-button type="primary">
							<el-icon class="el-icon--left"><arrow-down /></el-icon>导出其它
						</el-button>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item command="v">导出线下冻结电话</el-dropdown-item>
								<el-dropdown-item command="w">导出不保全撤诉案件</el-dropdown-item>							
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>				
			</template>
			<template #search-middle="scope">
				<div class="el-col el-col-6 fs-search-col">
					<el-form-item label="委案起始">					
						<el-date-picker
							v-model="scope.form.commission_time"
							type="daterange"
							range-separator="-"
							start-placeholder="开始"
							end-placeholder="结束"						
						/>
					</el-form-item>
				</div>
				<div class="el-col el-col-6 fs-search-col">
					<el-form-item label="立案起始">
						<el-date-picker
							v-model="scope.form.preservation_time"
							type="daterange"
							range-separator="-"
							start-placeholder="开始"
							end-placeholder="结束"						
						/>
					</el-form-item>
				</div>
				<div class="el-col el-col-5 fs-search-col">
					<el-form-item label="综合查询">
						<el-input v-model="scope.form.com_search" placeholder="真账号/卡号/姓名/手机/地址/身份证" />					
					</el-form-item>
				</div>
				<div class="el-col el-col-6 fs-search-col">
					<el-form-item label="批量查询">
						<el-input v-model="scope.form.batch_search" placeholder="姓名/真账号/卡号/身份证号/空格/逗号/换行符间隔" />					
					</el-form-item>
				</div>
			</template>
			<el-dialog
				v-model="batchMarkVisible"
				title="批量标记"
				width="600"
				destroy-on-close
				center
			>
				<span style="position: absolute; border-bottom: solid 1px #ccc; margin-top: -30px; left: 0;right: 0;">				
				</span>
				<div class="el-row">
					<div class="el-col el-col-6" style="display: flex; justify-content: center; align-items: center;">
						<el-button @click="preCaseInfoData">上一个案件</el-button>
					</div>
					<div class="el-col el-col-12" style="background-color:#e2e2e2 ;">
						<div class="el-row" style="align-content: center;justify-content: center;">							
							第&nbsp;<span style="color: blue;">{{ currentIndex }}</span>&nbsp;件/共&nbsp;<span style="color: blue;">{{ crudBinding.method.getSelectIds().length }}</span>&nbsp;件
						</div>
						<div class="el-row" style="align-content: center;justify-content: center;">
							<p>{{ curData?.name +"、" + curData?.gender + "、【" + curData?.id_no + "】←身份证号" }}</p>
							<p>{{ "开户日→【"+"】【"+"】←停卡日" }}</p>
							<p>{{ "批次→【"+"】【"+"】←账号" }}</p>
						</div>						
					</div>
					<div class="el-col el-col-6" style="display: flex; justify-content: center; align-items: center;">
						<el-button @click="nextCaseInfoData">下一个案件</el-button>
					</div>
				</div>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="batchMarkVisible = false">Cancel</el-button>
						<el-button type="primary" @click="batchMarkVisible = false">
						Confirm
						</el-button>
					</div>
				</template>
			</el-dialog>
			<el-dialog v-model="caseInfoDetailShow"
				title="案件详情"
				width="90%"
				destroy-on-close
				>
				<span style="position: absolute; border-bottom: solid 1px #ccc; margin-top: -15px; left: 0;right: 0;"></span>
				<el-row style="line-height: 41px;">
					<el-col :span="12">
						<span style="font-size: 22px; font-weight: 700;">{{ caseInfoData.name + "," + caseInfoData.gender +"," + oldYears }}</span>						
					</el-col>
					<el-col :span="12" style="text-align: right">
						<span style="background-color: rgb(45, 183, 245); color: #fff;padding: 5px 10px; border-radius: 4px;">{{ "#"+caseInfoData.case_no }}</span>
					</el-col>
				</el-row>
				<el-row style="position: relative;">
					<span style="position: absolute; border-bottom: dashed 1px #ccc;  left: 0;right: 0;"></span>
				</el-row>
				<el-row>
					<el-col :span="24">
						<div style="display: flex; flex-direction:row; align-items:center;margin:15px 0 5px 0;">
							<div class="mainItem">
								<div class="mainInfo" style="background-color: #f2f6fc;border-top-left-radius: 5px; border-bottom-left-radius: 5px;">
									<span>{{ caseInfoData.commission_company }}</span>
									<span class="mainText">委案公司</span>
								</div>	
							</div>
							<div class="mainItem">
								<div class="mainInfo" style="background-color:  #f2f6fc;border-top-right-radius: 5px; border-bottom-right-radius: 5px;">
									<span>{{ caseInfoData.batch }}</span>
									<span class="mainText">委案批次</span>
								</div>	
							</div>
							<div class="mainItem">
								<div class="mainInfo" style="background-color:  #ffecec;border-top-left-radius: 5px; border-bottom-left-radius: 5px;">
									<span style="color:#c21c04;">{{ caseInfoData.depart }}</span>
									<span class="mainText">处置主体</span>
								</div>	
							</div>
							<div class="mainItem">
								<div class="mainInfo" style="background-color:  #ffecec;">
									<span style="color:#c21c04;">{{ caseInfoData.depart +"激发考虑到实际发的斯洛伐克"}}</span>
									<span class="mainText">受理法院</span>
								</div>	
							</div>
							<div class="mainItem">
								<div class="mainInfo" style="background-color:  #ffecec;">
									<span style="color:#c21c04;">{{ caseInfoData.depart }}</span>
									<span class="mainText">开始处置日期</span>
								</div>	
							</div>
							<div class="mainItem">
								<div class="mainInfo" style="background-color:  #ffecec;border-top-right-radius: 5px; border-bottom-right-radius: 5px;">
									<span style="color:#c21c04;">{{ caseInfoData.depart }}</span>
									<span class="mainText">累计处置天数</span>
								</div>	
							</div>
							<div class="mainItem">
								<div class="mainInfo" style="background-color:  #f2faff;border-top-left-radius: 5px; border-bottom-left-radius: 5px;">
									<span style="color:#409eff;">{{ caseInfoData.depart }}</span>
									<span class="mainText">分配阶段</span>
								</div>	
							</div>
							<div class="mainItem">
								<div class="mainInfo" style="background-color:  #f2faff; border-top-right-radius: 5px; border-bottom-right-radius: 5px;">
									<span style="color:#409eff;">{{ caseInfoData.depart }}</span>
									<span class="mainText">当前状态</span>
								</div>	
							</div>
							<div class="mainItem">
								<div style="margin-left: 15px;">
									<el-button style="height:57px;font-size:18px; font-weight: 700;" @click="saveData" :disabled="!canSave" type="primary">保存信息</el-button>
								</div>	
							</div>
						</div>						
					</el-col>
				</el-row>
				<el-tabs v-model="activeTabName" @tab-click="handleTabClick">
					<el-tab-pane label="基本信息" name="baseInfo">
						<el-form :model="caseInfoData" class="formStyle" label-width="150px">
							<el-row :gutter="15">
								<el-col :span="8">
									<el-form-item label="姓名" prop="name">
										<el-input disabled v-model="caseInfoData.name" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="当前阶段" prop="current_stage">
										<el-input  v-model="caseInfoData.current_stage" placeholder="请选择当前阶段" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="当前状态" prop="current_of">
										<el-input  v-model="caseInfoData.current_of" placeholder="请选择当前状态"/>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="15">
								<el-col :span="8">
									<el-form-item label="真账号" prop="case_no">
										<el-input disabled v-model="caseInfoData.case_no" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="卡号" prop="contract_no">
										<el-input  v-model="caseInfoData.contract_no" placeholder="请输入卡号" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="卡号2" prop="contract_no2">
										<el-input  v-model="caseInfoData.contract_no2" placeholder="请输入卡号2"/>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="15">
								<el-col :span="8">
									<el-form-item label="账单日" prop="entry_reminder_date">
										<el-date-picker type="date" value-format="YYYYMMDD"  v-model="caseInfoData.entry_reminder_date" placeholder="请输入账单日" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="开户日" prop="account_opening_date">
										<el-date-picker type="date" value-format="YYYYMMDD"  v-model="caseInfoData.account_opening_date" placeholder="请输入开户日" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="停卡日" prop="card_suspension_day">
										<el-date-picker type="date" value-format="YYYYMMDD"  v-model="caseInfoData.card_suspension_day" placeholder="请输入停卡日"/>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="15">
								<el-col :span="8">
									<el-form-item label="入催日" prop="entry_reminder_date">
										<el-date-picker type="date" value-format="YYYYMMDD"  v-model="caseInfoData.entry_reminder_date" placeholder="请输入入催日" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="逾期天数" prop="cal_overdue_days">
										<el-input  v-model="caseInfoData.cal_overdue_days" placeholder="请输入逾期天数" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="产品名称" prop="product_name">
										<el-input  v-model="caseInfoData.product_name" placeholder="请输入产品名称"/>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="15">
								<el-col :span="8">
									<el-form-item label="委案开始日期" prop="commission_start_time">
										<el-date-picker type="date" value-format="YYYYMMDD"  v-model="caseInfoData.commission_start_time" placeholder="请输入委案开始日期" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="委案结束日期" prop="commission_end_time">
										<el-date-picker type="date" value-format="YYYYMMDD"  v-model="caseInfoData.commission_end_time" placeholder="请输入委案结束日期" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="申请表申请日期" prop="application_time">
										<el-date-picker type="date" value-format="YYYYMMDD"  v-model="caseInfoData.application_time" placeholder="请输入申请表申请日期"/>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row style="position: relative;margin: 0 0 20px 0;">
								<span style="position: absolute; border-bottom: solid 1px #ccc;  left: 0;right: 0;"></span>
							</el-row>
							<el-row :gutter="15">
								<el-col :span="8">
									<el-form-item label="欠款总额" prop="amount_owed">
										<el-input  v-model="caseInfoData.amount_owed" placeholder="请输入欠款总额" >
											<template #append>元</template>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="本金" prop="principal">
										<el-input  v-model="caseInfoData.principal" placeholder="请输入本金" >	
											<template #append>元</template>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="利息" prop="interest">
										<el-input  v-model="caseInfoData.interest" placeholder="请输入利息">
											<template #append>元</template>
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="15">
								<el-col :span="8">
									<el-form-item label="违约金" prop="default_money">
										<el-input  v-model="caseInfoData.default_money" placeholder="请输入违约金" >
											<template #append>元</template>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="年费" prop="annual_fee">
										<el-input  v-model="caseInfoData.annual_fee" placeholder="请输入年费" >
											<template #append>元</template>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="分期手续费" prop="installment_handling_fee">
										<el-input  v-model="caseInfoData.installment_handling_fee" placeholder="请输入分期手续费">
											<template #append>元</template>
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="15">
								<el-col :span="8">
									<el-form-item label="其它费用" prop="other_expenses">
										<el-input  v-model="caseInfoData.other_expenses" placeholder="请输入其它费用">
											<template #append>元</template>
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</el-tab-pane>
					<el-tab-pane label="资信信息" name="creditInfo">
						<el-form :model="caseInfoData" class="formStyle" label-width="150px">
							<el-row :gutter="15">
								<el-col :span="8">
									<el-form-item label="姓名(简称)" prop="name">
										<el-input disabled v-model="caseInfoData.name" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="类型" prop="current_stage">
										<el-input  v-model="caseInfoData.current_stage" placeholder="请选择类型" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="角色" prop="current_of">
										<el-input  v-model="caseInfoData.current_of" placeholder="请选择角色"/>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="15">
								<el-col :span="8">
									<el-form-item label="身份证号" prop="name">
										<el-input v-model="caseInfoData.name" placeholder="请输入身份证号" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="联系方式" prop="current_stage">
										<el-input  v-model="caseInfoData.current_stage" placeholder="请输入联系方式" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="邮件" prop="current_of">
										<el-input  v-model="caseInfoData.current_of" placeholder="请输入邮件"/>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="15">
								<el-col :span="8">
									<el-form-item label="民族" prop="name">
										<el-input v-model="caseInfoData.name" placeholder="请选择名族" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="性别" prop="current_stage">
										<el-input  v-model="caseInfoData.current_stage" placeholder="请选择性别" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="出生地" prop="current_of">
										<el-input  v-model="caseInfoData.current_of" placeholder="请输入出生地"/>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="15">
								<el-col :span="24">
									<el-form-item label="OCR地址" prop="name">
										<el-input disabled v-model="caseInfoData.name" />
									</el-form-item>
								</el-col>								
							</el-row>
							<el-row :gutter="15">
								<el-col :span="24">
									<el-form-item label="户籍地址" prop="name">
										<el-input  v-model="caseInfoData.name" placeholder="请输入户籍地址"/>
									</el-form-item>
								</el-col>								
							</el-row>
							<el-row :gutter="15">
								<el-col :span="24">
									<el-form-item label="家庭地址" prop="name">
										<el-input  v-model="caseInfoData.name" placeholder="请输入家庭地址"/>
									</el-form-item>
								</el-col>								
							</el-row>
						</el-form>
						<div style="position: relative;">
							<span style="position: absolute; border-bottom: solid 1px #ccc;  left: 0;right: 0;"></span>
						</div>
						<div style="margin-top: 10px; text-align: right;">
							<el-button type="primary" @click="saveCreditInfo">修改</el-button>
						</div>
					</el-tab-pane>
					<el-tab-pane label="司法记录" name="judicialRecords">
						<el-form :model="caseInfoData" class="formStyle" label-width="150px">
							<el-row :gutter="15">
								<el-col :span="8">
									<el-form-item label="保全立案日" prop="entry_reminder_date">
										<el-date-picker type="date" value-format="YYYYMMDD"  v-model="caseInfoData.entry_reminder_date" placeholder="请输入保全立案日" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="保全案号" prop="name">
										<el-input  v-model="caseInfoData.name" placeholder="请输入保全案号"/>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="保全类型" prop="name">
										<el-input  v-model="caseInfoData.name" placeholder="请选择保全案号"/>
									</el-form-item>
								</el-col>							
							</el-row>							
							<el-row :gutter="15">
								<el-col :span="8">
									<el-form-item label="申请保全金额" prop="name">
										<el-input v-model="caseInfoData.name" placeholder="请输入申请保全金额" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="保全查封金额" prop="current_stage">
										<el-input  v-model="caseInfoData.current_stage" placeholder="请输入保全查封金额" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="保全执行人" prop="current_of">
										<el-input  v-model="caseInfoData.current_of" placeholder="请选择保全类型"/>
									</el-form-item>
								</el-col>								
							</el-row>
							<el-row :gutter="15">
								<el-col :span="8">
									<el-form-item label="解除保全日" prop="name">
										<el-date-picker type="date" value-format="YYYYMMDD" v-model="caseInfoData.name" placeholder="请输入解除保全日" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item label="解除保全案号" prop="current_stage">
										<el-input  v-model="caseInfoData.current_stage" placeholder="请输入保全案号" />
									</el-form-item>
								</el-col>													
							</el-row>
						</el-form>
					</el-tab-pane>
					<el-tab-pane label="R码" name="rCode">
						<div>
							<el-table :data="rCodeData" stripe border style="width: 100%;border-radius: 5px;"  height="300">
								<el-table-column type="index" label="#" width="50" />
								<el-table-column prop="date" label="申请书编号" width="180" />
								<el-table-column prop="name" label="申请书录入时间" width="180" />
								<el-table-column prop="address" label="激活标识" />
								<el-table-column prop="odate" label="激活日期" />
								<el-table-column prop="barcode" label="bar_code" />								
							</el-table>
						</div>
					</el-tab-pane>
					<el-tab-pane label="证据资料" name="dvidenceMaterials">
						<div style="margin-bottom: 10px;">
							<el-button type="primary" @click="addOrginData">新增[原始材料]</el-button>
							<el-button type="primary" @click="batchDownload">批量下载</el-button>
						</div>
						<div>
							<el-table :data="dvidenceMaterialsTableData" stripe border style="width: 100%; border-radius: 5px;" height="300">
								<el-table-column type="index" label="#" width="50" align="center" />
								<el-table-column prop="title" label="标题" width="180" align="center"/>
								<el-table-column prop="dataType" label="资料类型" width="180" align="center"/>
								<el-table-column prop="markType" label="标记分类" align="center"/>
								<el-table-column prop="attachment" label="附件" align="center">
									<template #default="scope">
										<span class="uiLink" @click.stop="viewAttachment(scope.row)">查看</span>
									</template>
								</el-table-column>														
							</el-table>
						</div>
						<div class="pageStyle" v-if="dvidenceMaterialsTableData.length>0">
							<el-pagination
								v-model:current-page="currentPage"
								v-model:page-size="pageSize"
								:page-sizes="[10, 20, 30, 40, 50]"								
								background
								layout="total,sizes, prev, pager, next,jumper"
								:total="total"
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
							/>
						</div>
					</el-tab-pane>
				</el-tabs>
				<el-dialog
					v-model="addOrginShow"
					width="500"
					title="证据资料上传"
					append-to-body
					>
					<div>
						<el-form :model="orginData" class="formStyle" label-width="60px">
							<el-row :gutter="15">
								<el-col :span="24">
									<el-form-item label="文件" prop="file">
										<el-upload v-model:file-list="defaultFileList" :auto-upload="false"  :on-change="handleUpLoadChange" >
											<template #trigger>
												<el-button icon="Upload" >选择文件</el-button>
											</template>
										</el-upload>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
					<template #footer>
						<div class="dialog-footer">
							<el-button @click="addOrginShow = false">关闭</el-button>
							<el-button type="primary" @click="importOrignData">导入</el-button>
						</div>
					</template>
				</el-dialog>
			</el-dialog>
		</fs-crud>
	</fs-page>
</template>

<script lang="ts">
import { ref, onMounted, defineComponent} from 'vue';
import type { TabsPaneContext } from 'element-plus';
import { useFs } from '@fast-crud/fast-crud';
import {auth} from '/@/utils/authFunction';
import createCrudOptions  from './crud';
import * as optionData from '/@/stores/dictData';
import type { UploadProps, UploadUserFile } from 'element-plus';



const batchMarkVisible = ref(false);
const caseInfoDetailShow = ref(false);

const context:any={
	batchMarkVisible
}

function parseDate(str:any){
    if(str.match(/^\d{4}[\-\/\s+]\d{1,2}[\-\/\s+]\d{1,2}$/)){
        return new Date(str.replace(/[\-\/\s+]/i,'/'));
    }
    else if(str.match(/^\d{8}$/)){
        return new Date(str.substring(0,4)+'/'+str.substring(4,6)+'/'+str.substring(6));
    }
    else{
        throw new Error("日期转换发生错误！");
		 
    }
}

function GetAgeByBrithday(birthday:any){
	let age=-1;
	let today=new Date();
	let todayYear=today.getFullYear();
	let todayMonth=today.getMonth()+1;
	let todayDay=today.getDate();
	let birthDate=parseDate(birthday);
	if(parseDate(birthday))
	{
		let birthdayYear=birthDate.getFullYear();
		let birthdayMonth=birthDate.getMonth();
		let birthdayDay=birthDate.getDate();
		if(todayYear-birthdayYear<0){
			throw new Error("生日错误！");
		}else{
			if(todayMonth*1-birthdayMonth*1<0){
				age = (todayYear*1-birthdayYear*1)-1;
			}else{
				if(todayDay-birthdayDay>=0){
						age = (todayYear*1-birthdayYear*1);
				}else{
						age = (todayYear*1-birthdayYear*1)-1;
				}
			}
		}
		return age*1;
	}else{
		return -1;
	}
}

export default defineComponent({    //这里配置defineComponent
    name: "CaseInfoModelViewSet",   //把name放在这里进行配置了
    setup() {   //这里配置了setup()

		const { crudBinding, crudRef, crudExpose, resetCrudOptions } = useFs({createCrudOptions, context});
		const currentIndex = ref(1);
		const curData = ref();
		const caseInfoData = ref();
		const oldYears = ref(18);
		const rCodeData = ref();
		const dvidenceMaterialsTableData = ref();
		const canSave = ref(true);
		const addOrginShow = ref(false);
		const orginData = ref();
		rCodeData.value = [];
		dvidenceMaterialsTableData.value = [];
		const activeTabName = ref("baseInfo");
		const defaultFileList = ref<UploadUserFile[]>([]);
		const currentPage = ref(1);
		
		const pageSize = ref(10);

		const total = ref(0);
		// paseSize 更改
		const handleSizeChange = (val: number) => {
			console.log(`${val} items per page`)
		}
		// pageNum 更改
		const handleCurrentChange = (val: number) => {
			console.log(`current page: ${val}`)
		}
		// tab页点击
		const handleTabClick = (tab: TabsPaneContext, event: Event)=>{
			switch(tab.paneName){
				case "baseInfo":
					canSave.value = true;
					break;
				case "rCode":
					canSave.value = false;
					break;
				case "dvidenceMaterials":
					canSave.value = false;
					dvidenceMaterialsTableData.value = [{title:"测试",dataType:"私密",markType:"首图",attachment:"番号"},{title:"测试",dataType:"私密",markType:"首图",attachment:"番号"},{title:"测试",dataType:"私密",markType:"首图",attachment:"番号"},{title:"测试",dataType:"私密",markType:"首图",attachment:"番号"},{title:"测试",dataType:"私密",markType:"首图",attachment:"番号"},{title:"测试",dataType:"私密",markType:"首图",attachment:"番号"},{title:"测试",dataType:"私密",markType:"首图",attachment:"番号"},{title:"测试",dataType:"私密",markType:"首图",attachment:"番号"},{title:"测试",dataType:"私密",markType:"首图",attachment:"番号"},{title:"测试",dataType:"私密",markType:"首图",attachment:"番号"},{title:"测试",dataType:"私密",markType:"首图",attachment:"番号"},{title:"测试",dataType:"私密",markType:"首图",attachment:"番号"}];
					total.value = 12;
					break;
				case "judicialRecords":
					canSave.value = true;
					break;
				case "creditInfo":
					canSave.value = false;
					break;
			}
			console.log(tab,event);
		}
		// 附件查看
		const viewAttachment = (row:any)=>{
			console.log(row);
		}
		// 初始化案件信息
		const initCaseInfoData = (data:any)=>{
			console.log(optionData,data);
			
			caseInfoData.value = data;
			caseInfoDetailShow.value = true;
			if (data.date_of_birth){				
				oldYears.value = GetAgeByBrithday(data.date_of_birth);
			}
		}

		context.initCaseInfoData = initCaseInfoData;

		const preCaseInfoData= ()=>{			
			let selectIds = context.selectedIds;
			if (currentIndex.value > 1){
				currentIndex.value -= 1;
			}
			let id = selectIds[currentIndex.value-1];
			if (crudBinding.value.data){
				let tmpIndex:number = crudBinding.value.data.findIndex(o=>o.id == id);
				curData.value = crudBinding.value.data[tmpIndex];
			}						
		}
		context.preCaseInfoData = preCaseInfoData;
		const nextCaseInfoData=()=>{
			let selectIds = context.selectedIds;
			if (currentIndex.value < selectIds.length){
				currentIndex.value += 1;
			}
			let id = selectIds[currentIndex.value-1];
			if (crudBinding.value.data){
				let tmpIndex:number = crudBinding.value.data.findIndex(o=>o.id == id);
				curData.value = crudBinding.value.data[tmpIndex];
			}
		}
		// 新增原始材料
		const addOrginData = ()=>{
			addOrginShow.value = true;
			orginData.value = {file:null};
			defaultFileList.value = [];
		}
		// 原始材料选择更改
		const handleUpLoadChange:UploadProps['onChange'] = (uploadFile, uploadFiles)=>{
			console.log(uploadFile,uploadFiles);
		}

		// 批量下载
		const batchDownload = ()=>{

		}
		// 导入原始资料
		const importOrignData = ()=>{
			console.log(orginData);
		}

		// 修改资信信息
		const saveCreditInfo=()=>{
			alert("saveCreditInfo");
		}
		// 保存信息
		const saveData = ()=>{
			alert("saveData");
		}
		
		// 页面打开后获取列表数据
		onMounted(() => {
			crudExpose.doRefresh();
		});
		return {  
		//增加了return把需要给上面<template>内调用的<fs-crud ref="crudRef" v-bind="crudBinding">
			crudBinding,
			crudRef,
			auth,
			batchMarkVisible,
			caseInfoDetailShow,
			preCaseInfoData,
			nextCaseInfoData,
			currentIndex,
			curData,
			activeTabName,
			handleTabClick,
			caseInfoData,
			oldYears,
			rCodeData,
			dvidenceMaterialsTableData,
			viewAttachment,
			currentPage,
			pageSize,
			total,
			handleCurrentChange,
			handleSizeChange,
			saveData,
			canSave,
			addOrginShow,
			addOrginData,
			batchDownload,
			importOrignData,
			orginData,
			handleUpLoadChange,
			defaultFileList,
			saveCreditInfo
		};
    } 	//这里关闭setup()
  });  //关闭defineComponent

</script>
<style lang="scss" >
.el-col-12 {
	.el-form-item--default {
		.el-form-item__label,.el-form-item--default {
			width: 130px !important;
		}
	}	 
}
.fs-search-columns {
	.fs-search-slot {
		display: flex;
	}
}

.formStyle {
	.el-input-group--append {

	
		// .el-input__wrapper {
		// 	box-shadow: none;
		// 	border-top: 1px solid #eee;
		// 	border-bottom: 1px solid #eee;
		// 	border-left: 1px solid #eee;
		// }

		.el-input-group__append {
			// background-color: rgba(0,0,0,0);
			// box-shadow: none;
			padding: 0 5px;
			// border-top: 1px solid #eee;
			// border-bottom: 1px solid #eee;
			// border-right: 1px solid #eee;
		}

		
	}

	
}
.mainItem {
	display: inline-block;
	

	.mainInfo {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 5px 15px;

		.mainText {
			color: #909399;
			margin-top:5px;
		}
	}
}

.pageStyle {
	margin-top: 10px;

	.el-pagination {
		justify-content: flex-end;
	}
}

.uiLink {
	cursor: pointer;
	color:rgb(64, 158, 255);
}

// .uiLink:hover {
// 	color:red;
// }

	
</style>